<style lang="less">
#polylineMap {
  width: 100%;
  height: 340px;
}
</style>
<template>
  <div style="background:#fff">
    <Tabs>
      <TabPane label="线路列表">
        <div class="search">
          <Row>
            <Col>
              <Card>
                <Row>
                  <Form
                    ref="searchForm"
                    :model="searchForm"
                    inline
                    :label-width="70"
                    class="search-form"
                  >
                    <Form-item label="线路名称">
                      <Input
                        type="text"
                        v-model="searchForm.polylineName"
                        :clearable="true"
                        placeholder="请输入线路名称"
                        style="width: 200px"
                      />
                    </Form-item>
                    <Form-item style="margin-left:-35px;" class="br">
                      <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                      <Button @click="handleReset">重置</Button>
                    </Form-item>
                  </Form>
                </Row>
                <Row class="operation">
                  <Button @click="add" type="primary" icon="md-add" v-has="'add'">新增</Button>
                  <Button @click="bind" type="warning" icon="md-attach" v-has="'bind'">绑定车辆</Button>
                  <circleLoading v-if="operationLoading" />
                </Row>
                <Row>
                  <Alert show-icon>
                    已选择
                    <span class="select-count">{{selectCount}}</span> 项
                    <a class="select-clear" @click="clearSelectAll">清空</a>
                  </Alert>
                </Row>
                <Row>
                  <Table
                    :loading="loading"
                    border
                    :columns="columns"
                    :data="data"
                    sortable="custom"
                    @on-sort-change="changeSort"
                    @on-selection-change="showSelect"
                    ref="table"
                  ></Table>
                </Row>
                <Row type="flex" justify="end" class="page">
                  <Page
                    :current="searchForm.current"
                    :total="total"
                    :page-size="searchForm.size"
                    @on-change="changePage"
                    @on-page-size-change="changePageSize"
                    :page-size-opts="[10,20,50,100]"
                    size="small"
                    show-total
                    show-elevator
                    show-sizer
                  ></Page>
                </Row>
              </Card>
            </Col>
          </Row>
        </div>
      </TabPane>
      <TabPane label="车辆绑定信息">
        <carBindPolyline></carBindPolyline>
      </TabPane>
    </Tabs>
    <Modal
      :title="modalTitle"
      v-model="polylineModalVisible"
      :mask-closable="false"
      :width="1000"
      :styles="{top: '30px'}"
    >
      <div id="polylineMap"></div>
      <Tabs value="name1">
        <TabPane label="线路信息" name="name1">
          <Form
            ref="polylineForm"
            :model="polylineForm"
            :label-width="110"
            :rules="polylineFormValidate"
            :disabled="modalType==1"
            style="padding-top:20px;"
          >
            <Row>
              <Col :span="12">
                <FormItem label="线路名称" prop="polylineName">
                  <Input v-model="polylineForm.polylineName" style="width:240px;" />
                </FormItem>
              </Col>
              <Col :span="12">
                <FormItem
                  label="线路宽度(米)"
                  prop="width"
                  :rules=" {
                              required: true,
                              message: '限速为整数',
                              trigger: 'blur',
                              pattern: /^[0-9]\d*$/
                              }"
                >
                  <Input v-model="polylineForm.width" style="width:235px;" />
                  <Button
                    type="warning"
                    icon="ios-brush"
                    :loading="submitLoading"
                    :disabled="modalType==1"
                    @click="startDraw"
                  >开始绘制</Button>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col :span="12">
                <FormItem label="坐标点" prop="latlng">
                  <Input
                    v-model="polylineForm.latlng"
                    placeholder="在地图上绘制获得"
                    style="width:240px;"
                    :readonly="true"
                  />
                </FormItem>
              </Col>
              <Col :span="12"></Col>
            </Row>
            <Row>
              <Col :span="12">
                <FormItem label="时间设置">
                  <Checkbox v-model="polylineForm.dateLimit">线路有效期（不勾选，则永久有效）</Checkbox>
                </FormItem>
              </Col>
              <Col :span="12">
                <Row>
                  <Col :span="12">
                    <FormItem label="开始时间" prop="limitStart">
                      <DatePicker
                        type="date"
                        v-model="polylineForm.limitStart"
                        :disabled="!polylineForm.dateLimit"
                        :transfer="true"
                        style="width:140px;"
                      ></DatePicker>
                    </FormItem>
                  </Col>
                  <Col :span="12">
                    <FormItem label="结束时间" label-width="80" prop="limitEnd">
                      <DatePicker
                        type="date"
                        v-model="polylineForm.limitEnd"
                        :start-date="polylineForm.limitStart"
                        :disabled="!polylineForm.dateLimit"
                        :transfer="true"
                        style="width:140px;"
                      ></DatePicker>
                    </FormItem>
                  </Col>
                </Row>
              </Col>
            </Row>
            <Row>
              <FormItem label="报警类型">
                <Checkbox v-model="polylineForm.alarmInDriver">进入线路报警给驾驶员</Checkbox>

                <Checkbox v-model="polylineForm.alarmOutDriver">出线路报警给驾驶员</Checkbox>

                <Checkbox v-model="polylineForm.alarmInPlatform">进入线路报警给平台</Checkbox>

                <Checkbox v-model="polylineForm.alarmOutPlatform">出线路报警给平台</Checkbox>
              </FormItem>
            </Row>
            <Row>
              <Col :span="10">
                <FormItem label="是否限速">
                  <Checkbox v-model="polylineForm.alarmOverspeed">超速报警</Checkbox>
                </FormItem>
              </Col>
              <Col :span="14">
                <Row>
                  <Col :span="11">
                    <FormItem
                      label="限速（km/h）"
                      prop="limitSpeed"
                      :rules=" {
                            required: polylineForm.alarmOverspeed,
                            message: '限速为整数',
                            trigger: 'blur',
                            pattern: /^[0-9]\d*$/
                            }"
                    >
                      <Input
                        v-model="polylineForm.limitSpeed"
                        placeholder="请输入整数"
                        style="width:130px;"
                      />
                    </FormItem>
                  </Col>
                  <Col :span="13">
                    <FormItem
                      label="路段超速持续时间(s)"
                      :label-width="160"
                      prop="alarmOverspeedTime"
                      :rules=" {
                       required: polylineForm.alarmOverspeed,
                       message: '路段超速持续时间为整数',
                       trigger: 'blur',
                       pattern: /^[0-9]\d*$/
                       }"
                    >
                      <Input
                        v-model="polylineForm.alarmOverspeedTime"
                        placeholder="请输入整数"
                        style="width:125px;"
                      />
                    </FormItem>
                  </Col>
                </Row>
              </Col>
            </Row>
          </Form>
        </TabPane>
        <TabPane label="拐点信息" name="name2">
          <Table
            :loading="loading"
            border
            :columns="flexPointColumns"
            :data="flexPointData"
            ref="flexPointTable"
          ></Table>
        </TabPane>
      </Tabs>

      <div slot="footer">
        <Button
          type="primary"
          :loading="submitLoading"
          :disabled="modalType==1"
          @click="submitPolyline"
        >提交</Button>
        <Button type="default" @click="polylineModalVisible = false">取消</Button>
      </div>
    </Modal>
    <Modal
      title="绑定车辆"
      v-model="bindModalVisible"
      :mask-closable="false"
      :width="1000"
      :styles="{top: '100px'}"
    >
      <carTable @showSelect="carSelect"></carTable>
      <div slot="footer">
        <Button type="primary" :loading="submitLoading" @click="submitBind">绑定</Button>
        <Button type="default" @click="bindModalVisible = false">取消</Button>
      </div>
    </Modal>
    <Modal
      title="线路路段信息"
      v-model="flexPointModalVisible"
      :mask-closable="false"
      :width="800"
      :styles="{top: '100px'}"
    >
      <Form ref="flexPointForm" :model="flexPointForm" :label-width="160" style="padding-top:20px;">
        <Row>
          <Col :span="12">
            <FormItem
              label="拐点名称"
              prop="pointName"
              :rules=" {
                              required: true,
                              message: '拐点名称必填',
                              trigger: 'blur',
                              type: 'string'
                              }"
            >
              <Input v-model="flexPointForm.pointName" :readonly="true" style="width:180px;" />
            </FormItem>
          </Col>
          <Col :span="12"></Col>
        </Row>
        <Row>
          <Col :span="12">
            <FormItem label="起点经度">
              <Input v-model="flexPointForm.lngStart" :readonly="true" style="width:180px;" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="起点纬度">
              <Input v-model="flexPointForm.latStart" :readonly="true" style="width:180px;" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <FormItem label="终点经度">
              <Input v-model="flexPointForm.lngEnd" :readonly="true" style="width:180px;" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="终点纬度">
              <Input v-model="flexPointForm.latEnd" :readonly="true" style="width:180px;" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <FormItem
              label="线路宽度(米)"
              prop="width"
              :rules=" {
                              required: true,
                              message: '限速为整数',
                              trigger: 'blur',
                              pattern: /^[0-9]\d*$/
                              }"
            >
              <Input v-model="flexPointForm.width" style="width:180px;" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="是否报站点">
              <Checkbox v-model="flexPointForm.playPointName"></Checkbox>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <FormItem label="行驶时间限制">
              <Checkbox v-model="flexPointForm.driveTimeLimit">根据时间</Checkbox>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="限速设置">
              <Checkbox v-model="flexPointForm.alarmOverspeed">限速</Checkbox>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <FormItem
              label="路段行驶过长阈值(s)"
              prop="driveOvertime"
              :rules=" {
                              required: true,
                               message: '必填且为整数',
                            trigger: 'blur',
                            pattern: /^[0-9]\d*$/
                              }"
            >
              <Input v-model="flexPointForm.driveOvertime" style="width:180px;" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem
              label="路段行驶不足阈值(s)"
              prop="driveLesstime"
              :rules=" {
                              required: true,
                              message: '必填且为整数',
                            trigger: 'blur',
                            pattern: /^[0-9]\d*$/
                              }"
            >
              <Input v-model="flexPointForm.driveLesstime" style="width:180px;" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <FormItem
              label="限速（km/h）"
              prop="limitSpeed"
              :rules=" {
                            required: flexPointForm.alarmOverspeed,
                            message: '限速为整数',
                            trigger: 'blur',
                            pattern: /^[0-9]\d*$/
                            }"
            >
              <Input v-model="flexPointForm.limitSpeed" placeholder="请输入整数" style="width:130px;" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem
              label="路段超速持续时间(s)"
              :label-width="160"
              prop="alarmOverspeedTime"
              :rules=" {
                       required: flexPointForm.alarmOverspeed,
                       message: '路段超速持续时间为整数',
                       trigger: 'blur',
                       pattern: /^[0-9]\d*$/
                       }"
            >
              <Input
                v-model="flexPointForm.alarmOverspeedTime"
                placeholder="请输入整数"
                style="width:125px;"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" :loading="submitLoading" @click="submitFlexPoint">提交</Button>
        <Button type="default" @click="flexPointModalVisible = false">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import dayjs from "dayjs";
let mouseTool = null;
import {
  getPolylinePageList,
  getFlexPointPageList,
  editFlexPoint,
  addPolyline,
  editPolyline,
  deletePolyline,
  bindPolyline
} from "@/api/operate";
import circleLoading from "../../my-components/circle-loading.vue";
import carTable from "./carTable.vue";
import carBindPolyline from "./carBindPolyline.vue";
export default {
  name: "polyline-manage",
  components: {
    circleLoading,
    carTable,
    carBindPolyline
  },
  data() {
    return {
      carList: [], //选中绑定的车辆carId
      bindModalVisible: false,
      loading: true,
      operationLoading: false,
      searchForm: {
        polylineName: "",
        current: 1,
        size: 20,
        sort: "createTime",
        order: "desc"
      },
      polylinePoints: [],
      polylineModalVisible: false,
      modalType: 0,
      selectCount: 0,
      selectList: [],
      modalTitle: "",
      polylineForm: {
        polylineId: "",
        polylineName: "",
        width: "",
        latlng: "",
        dateLimit: false,
        limitStart: "",
        limitEnd: "",
        alarmInDriver: false,
        alarmOutDriver: false,
        alarmInPlatform: false,
        alarmOutPlatform: false,
        alarmOverspeed: false,
        limitSpeed: "",
        driftTime: ""
      },
      polylineFormValidate: {
        polylineName: [
          { required: true, message: "线路名称不能为空", trigger: "blur" }
        ],
        latlng: [{ required: true, message: "请绘制线路", trigger: "blur" }]
      },
      submitLoading: false,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "序号",
          type: "index",
          width: 65,
          align: "center",
          fixed: "left"
        },
        {
          title: "线路名称",
          key: "polylineName",
          width: 150,
          sortable: true
        },
        {
          title: "报警类型",
          key: "alarmType",
          minWidth: 180,
          render: (h, params) => {
            let alarmType = [];
            if (params.row.alarmInDriver) {
              alarmType.push("进入线路报警给驾驶员");
            }
            if (params.row.alarmOutDriver) {
              alarmType.push("出线路报警给驾驶员");
            }
            if (params.row.alarmInPlatform) {
              alarmType.push("进入线路报警给平台");
            }
            if (params.row.alarmOutPlatform) {
              alarmType.push("出线路报警给平台");
            }
            return h("span", alarmType.join(","));
          }
        },
        {
          title: "下发时间",
          key: "sendTime",
          sortable: true,
          sortType: "desc",
          width: 150
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  directives: [
                    {
                      name: "has",
                      value: "edit"
                    }
                  ],
                  on: {
                    click: () => {
                      this.detail(params.row);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  directives: [
                    {
                      name: "has",
                      value: "delete"
                    }
                  ],
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: [],
      total: 0,
      flexPointColumns: [
        {
          title: "序号",
          type: "index",
          width: 65,
          align: "center",
          fixed: "left"
        },
        {
          title: "拐点名称",
          key: "pointName",
          minWidth: 150
        },
        {
          title: "起点经度",
          key: "lngStart",
          width: 160
        },
        {
          title: "起点纬度",
          key: "latStart",
          width: 160
        },
        {
          title: "终点经度",
          key: "lngEnd",
          width: 160
        },
        {
          title: "终点纬度",
          key: "latEnd",
          width: 160
        },
        {
          title: "操作",
          key: "action",
          width: 100,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  directives: [
                    {
                      name: "has",
                      value: "pointFlex"
                    }
                  ],
                  on: {
                    click: () => {
                      this.editFlexPoint(params.row);
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      flexPointData: [],
      flexPointForm: {},
      flexPointModalVisible: false,
      map: null,
      allOverlay: [],
      drawingManager: null
    };
  },
  methods: {
    init() {
      this.getPolylineList();
      this.mapInit();
    },
    removeAllOverlay() {
      if (this.allOverlay.length > 0) {
        this.allOverlay.forEach(v => {
          v.setMap(null);
        });
      }
      this.allOverlay = [];
    },
    mapInit() {
      let lat = 39.915168,
        lng = 116.403875,
        zoom = 10;
      let mapOptions = {
        center: new google.maps.LatLng(lat, lng), //地图的中心点
        zoom: 10, //地图缩放比例
        // mapTypeId: mapType, //指定地图展示类型：卫星图像、普通道路
        scrollwheel: true //是否允许滚轮滑动进行缩放
      };
      this.map = new google.maps.Map(
        document.getElementById("polylineMap"),
        mapOptions
      );
      this.drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: false,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          drawingModes: ["polyline"]
        },
        markerOptions: {
          icon:
            "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
        }
      });
      let self = this;
      this.drawingManager.setMap(this.map);
      function handleOverlayComplete() {
        self.drawingManager.setDrawingMode(null);
        self.drawingManager.setOptions({
          drawingControl: false,
          drawingControlOptions: { drawingModes: [] }
        });
      }
      google.maps.event.addListener(
        this.drawingManager,
        "polylinecomplete",
        function(polyline) {
          handleOverlayComplete();
          self.allOverlay.push(polyline);
          let polylineBounds = polyline.getPath();
          let bounds = [];
          for (var i = 0; i < polylineBounds.length; i++) {
            var point =
              polylineBounds.getAt(i).lat() +
              "," +
              polylineBounds.getAt(i).lng();
            bounds.push(point);
          }
          self.polylineForm.latlng = bounds.join("|");

          console.log(polyline.getPath());
        }
      );
    },
    startDraw() {
      this.removeAllOverlay();
      this.drawingManager.setOptions({
        drawingControl: true,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          drawingModes: ["polyline"]
        },
        polylineOptions: {
          strokeColor: "#3366FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          strokeOpacity: 0.8,
          fillColor: "#1791fc",
          fillOpacity: 0.4,
          zIndex: 1
        }
      });

      this.$Message.info("点击地图上的手按钮完成绘制");
    },
    changePage(v) {
      this.searchForm.current = v;
      this.getPolylineList();
    },
    changePageSize(v) {
      this.searchForm.size = v;
      this.getPolylineList();
    },
    getPolylineList() {
      // 多条件搜索
      this.loading = true;
      getPolylinePageList(this.searchForm).then(res => {
        this.loading = false;
        if (res.code == 0) {
          this.data = res.data.records;
          this.total = res.data.total;
          this.clearSelectAll();
        }
      });
    },
    getFlexPointList(polylineId) {
      this.loading = true;
      getFlexPointPageList({ polylineId: polylineId }).then(res => {
        this.loading = false;
        if (res.code == 0) {
          this.flexPointData = res.data;
        }
      });
    },
    handleSearch() {
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      this.getPolylineList();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.polylineName = "";
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      // 重新加载数据
      this.getPolylineList();
    },
    showSelect(e) {
      this.selectList = e;
      this.selectCount = e.length;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getPolylineList();
    },
    submitPolyline() {
      this.$refs.polylineForm.validate(valid => {
        if (valid) {
          console.log(this);
          this.submitLoading = true;
          if (this.polylineForm.dateLimit) {
            if (!(this.polylineForm.limitStart && this.polylineForm.limitEnd)) {
              this.submitLoading = false;
              this.$Message.warning(
                "勾选线路有效期以后要选择开始时间和结束时间！"
              );
              return;
            } else {
              if (this.polylineForm.limitEnd <= this.polylineForm.limitStart) {
                this.submitLoading = false;
                this.$Message.warning("结束时间要大于开始时间！");
                return;
              }

              if (this.polylineForm.limitStart instanceof Date) {
                this.polylineForm.limitStart = dayjs(
                  this.polylineForm.limitStart
                ).format("YYYY-MM-DD HH:mm:ss");
              }
              if (this.polylineForm.limitEnd instanceof Date) {
                this.polylineForm.limitEnd = dayjs(
                  this.polylineForm.limitEnd
                ).format("YYYY-MM-DD HH:mm:ss");
              }
            }
          }
          let points = [];
          let len = this.polylinePoints.length - 1;
          for (let i = 0; i < len; i++) {
            let currPoint = this.polylinePoints[i];
            let nextPoint = this.polylinePoints[i + 1];
            points.push({
              pointName: "拐点" + (i + 1),
              width: this.polylineForm.width,
              latStart: currPoint.lat,
              lngStart: currPoint.lng,
              latEnd: nextPoint.lat,
              lngEnd: nextPoint.lng,
              ordering: i + 1,
              alarmOverspeed: this.polylineForm.alarmOverspeed,
              alarmOverspeedTime: this.polylineForm.alarmOverspeedTime,
              limitSpeed: this.polylineForm.limitSpeed
            });
          }
          this.polylineForm.points = points;
          addPolyline(this.polylineForm).then(res => {
            this.submitLoading = false;
            if (res.code == 0) {
              this.$Message.success("操作成功");
              this.getPolylineList();
              this.polylineModalVisible = false;
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    add() {
      this.modalType = 0;
      this.modalTitle = "新增线路";
      this.removeAllOverlay();
      this.polylineForm = {
        polylineId: "",
        polylineName: "",
        width: "",
        latlng: "",
        dateLimit: false,
        limitStart: "",
        limitEnd: "",
        alarmInDriver: false,
        alarmOutDriver: false,
        alarmInPlatform: false,
        alarmOutPlatform: false,
        alarmOverspeed: false,
        limitSpeed: "",
        driftTime: ""
      };
      this.flexPointData = [];
      this.polylineModalVisible = true;
    },
    detail(v) {
      this.modalType = 1;
      this.modalTitle = "查看线路";
      this.$refs.polylineForm.resetFields();
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      this.polylineForm = JSON.parse(JSON.stringify(v));
      this.getFlexPointList(this.polylineForm.polylineId);

      this.removeAllOverlay();

      // 构造矢量多边形
      let polyPoints = v.latlng.split("|");
      let path = [];
      polyPoints.forEach(poly => {
        let item = poly.split(",");
        path.push(new AMap.LngLat(item[1], item[0]));
      });

      var polyline = new AMap.Polyline({
        path: path,
        strokeColor: "#3366FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        // 线样式还支持 'dashed'
        strokeStyle: "solid"
        // strokeStyle是dashed时有效
        // strokeDasharray: [10, 5],
      });

      this.map.add(polyline);
      this.map.setFitView();

      this.polylineModalVisible = true;
    },
    remove(v) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除线路 " + v.polylineName + " ?",
        loading: true,
        onOk: () => {
          deletePolyline(v.polylineId).then(res => {
            this.$Modal.remove();
            if (res.code == 0) {
              this.$Message.success("删除成功");
              this.getPolylineList();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    bind() {
      if (this.selectCount !== 1) {
        this.$Message.warning("请选择一个线路绑定车辆");
        return;
      }
      this.bindModalVisible = true;
    },
    carSelect(data) {
      console.log(data);
      this.carList = data.map(item => {
        return { carId: item.carId };
      });
    },
    submitBind() {
      this.submitLoading = true;
      if (this.carList.length == 0 || this.selectCount !== 1) {
        this.$Message.warning("请至少选择一个车辆绑定");
        this.submitLoading = false;
        return;
      }
      let params = {
        polylineId: this.selectList[0].polylineId,
        carList: this.carList
      };
      bindPolyline(params).then(res => {
        this.submitLoading = false;
        if (res.code == 0) {
          this.$Message.success("绑定成功");
          this.getPolylineList();
          this.bindModalVisible = false;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    editFlexPoint(v) {
      this.flexPointModalVisible = true;
      this.$refs.flexPointForm.resetFields();
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      this.flexPointForm = JSON.parse(JSON.stringify(v));
    },
    submitFlexPoint() {
      this.$refs.flexPointForm.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          editFlexPoint(this.flexPointForm).then(res => {
            this.submitLoading = false;
            if (res.code == 0) {
              this.$Message.success("操作成功");
              this.getFlexPointList(this.flexPointForm.polylineId);
              this.flexPointModalVisible = false;
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>